<template>
  <div class="pending-cases">
    <div class="page-header">
      <h1 class="page-title">待鉴定案件</h1>
      <div class="header-actions">
        <el-button type="primary" @click="refreshData">
          <i class="fas fa-sync-alt mr-2"></i>刷新
        </el-button>
      </div>
    </div>

    <!-- 搜索和筛选 -->
    <div class="search-section">
      <div class="search-row">
        <el-input
          v-model="searchQuery"
          placeholder="搜索案件编号、客户姓名或案件类型"
          class="search-input"
          clearable
        >
          <template #prefix>
            <i class="fas fa-search"></i>
          </template>
        </el-input>
        <el-select v-model="priorityFilter" placeholder="优先级" clearable class="priority-filter">
          <el-option label="全部" value=""></el-option>
          <el-option label="紧急" value="urgent"></el-option>
          <el-option label="高" value="high"></el-option>
          <el-option label="中" value="medium"></el-option>
          <el-option label="低" value="low"></el-option>
        </el-select>
        <el-select v-model="typeFilter" placeholder="案件类型" clearable class="type-filter">
          <el-option label="全部" value=""></el-option>
          <el-option label="医疗事故" value="medical"></el-option>
          <el-option label="交通事故" value="traffic"></el-option>
          <el-option label="工伤" value="injury"></el-option>
          <el-option label="其他" value="other"></el-option>
        </el-select>
        <el-date-picker
          v-model="appraisalDateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="鉴定开始日期"
          end-placeholder="鉴定结束日期"
          class="date-range-filter"
          clearable
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
        <el-select v-model="statusFilter" placeholder="鉴定状态" clearable class="status-filter">
          <el-option label="全部" value=""></el-option>
          <el-option label="待安排" value="pending-schedule"></el-option>
          <el-option label="已安排" value="scheduled"></el-option>
          <el-option label="进行中" value="in-progress"></el-option>
          <el-option label="待补材料" value="pending-materials"></el-option>
        </el-select>
        <el-select v-model="processTypeFilter" placeholder="流程类型" clearable class="process-filter">
          <el-option label="全部" value=""></el-option>
          <el-option label="诉前" value="pre-litigation"></el-option>
          <el-option label="诉中" value="in-litigation"></el-option>
          <el-option label="和谈" value="settlement"></el-option>
        </el-select>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </div>
    </div>

    <!-- 统计信息 -->
    <div class="stats-section">
      <div class="stat-card urgent">
        <div class="stat-icon">
          <i class="fas fa-exclamation-triangle"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.urgentCases }}</div>
          <div class="stat-label">紧急案件</div>
        </div>
      </div>
      <div class="stat-card high">
        <div class="stat-icon">
          <i class="fas fa-arrow-up"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.highPriorityCases }}</div>
          <div class="stat-label">高优先级</div>
        </div>
      </div>
      <div class="stat-card normal">
        <div class="stat-icon">
          <i class="fas fa-clock"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.normalCases }}</div>
          <div class="stat-label">普通案件</div>
        </div>
      </div>
      <div class="stat-card overdue">
        <div class="stat-icon">
          <i class="fas fa-calendar-times"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.overdueCases }}</div>
          <div class="stat-label">逾期案件</div>
        </div>
      </div>
    </div>

    <!-- 案件列表 -->
    <div class="cases-section">
      <div class="section-header">
        <h2 class="section-title">待鉴定案件列表</h2>
        <div class="header-controls">
          <div class="batch-actions" v-if="selectedCases.length > 0">
            <span class="selected-count">已选择 {{ selectedCases.length }} 个案件</span>
            <el-button type="primary" @click="showBatchAppointmentDialog">
              <i class="fas fa-calendar-plus mr-2"></i>批量预约
            </el-button>
            <el-button @click="clearSelection">
              <i class="fas fa-times mr-2"></i>取消选择
            </el-button>
          </div>
          <div class="view-controls">
            <el-radio-group v-model="viewMode" size="small">
              <el-radio-button label="table">表格视图</el-radio-button>
              <el-radio-button label="card">卡片视图</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div>

      <!-- 表格视图 -->
      <div v-if="viewMode === 'table'" class="table-view">
        <el-table 
          :data="filteredCases" 
          v-loading="loading" 
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="caseNumber" label="案件编号" width="120"></el-table-column>
          <el-table-column prop="clientName" label="客户姓名" width="100"></el-table-column>
          <el-table-column prop="caseType" label="案件类型" width="100"></el-table-column>
          <el-table-column prop="processType" label="流程类型" width="100" align="center">
            <template #default="{ row }">
              <el-tag :type="getProcessTypeColor(row.processType)" size="small">
                {{ getProcessTypeText(row.processType) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="priority" label="优先级" width="100" align="center">
            <template #default="{ row }">
              <el-tag :type="getPriorityType(row.priority)">{{ getPriorityText(row.priority) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="submittedDate" label="提交日期" width="120"></el-table-column>
          <el-table-column prop="deadline" label="截止日期" width="120">
            <template #default="{ row }">
              <span :class="{ 'text-red-600': isOverdue(row.deadline) }">
                {{ row.deadline }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="estimatedDays" label="预计天数" width="100" align="center"></el-table-column>
          <el-table-column prop="appraisalDate" label="鉴定日期" width="120">
            <template #default="{ row }">
              <span v-if="row.appraisalDate">{{ row.appraisalDate }}</span>
              <span v-else class="text-gray-400">未安排</span>
            </template>
          </el-table-column>
          <el-table-column prop="appraisalStatus" label="鉴定状态" width="100" align="center">
            <template #default="{ row }">
              <el-tag :type="getAppraisalStatusType(row.appraisalStatus)" size="small">
                {{ getAppraisalStatusText(row.appraisalStatus) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="description" label="案件描述" min-width="200"></el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template #default="{ row }">
              <el-button size="small" type="primary" @click="startAppraisal(row)">
                <i class="fas fa-play mr-1"></i>开始鉴定
              </el-button>
              <el-button size="small" type="info" @click="viewCaseDetail(row)">
                <i class="fas fa-eye mr-1"></i>详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 卡片视图 -->
      <div v-else class="card-view">
        <div class="cases-grid">
          <div 
            v-for="case_ in filteredCases" 
            :key="case_.id"
            class="case-card"
            :class="{ 'urgent': case_.priority === 'urgent', 'overdue': isOverdue(case_.deadline), 'selected': selectedCaseIds.includes(case_.id) }"
          >
            <div class="case-header">
              <div class="case-selection">
                <el-checkbox 
                  :model-value="selectedCaseIds.includes(case_.id)"
                  @change="handleCardSelection(case_)"
                />
                <div class="case-number">{{ case_.caseNumber }}</div>
              </div>
              <div class="case-tags">
                <el-tag :type="getProcessTypeColor(case_.processType)" size="small">
                  {{ getProcessTypeText(case_.processType) }}
                </el-tag>
                <el-tag :type="getPriorityType(case_.priority)" size="small">
                  {{ getPriorityText(case_.priority) }}
                </el-tag>
              </div>
            </div>
            
            <div class="case-info">
              <h3 class="client-name">{{ case_.clientName }}</h3>
              <p class="case-type">{{ case_.caseType }}</p>
              <p class="case-description">{{ case_.description }}</p>
            </div>
            
            <div class="case-timeline">
              <div class="timeline-item">
                <i class="fas fa-calendar-plus"></i>
                <span>提交：{{ case_.submittedDate }}</span>
              </div>
              <div class="timeline-item" :class="{ 'overdue': isOverdue(case_.deadline) }">
                <i class="fas fa-calendar-check"></i>
                <span>截止：{{ case_.deadline }}</span>
              </div>
              <div class="timeline-item">
                <i class="fas fa-hourglass-half"></i>
                <span>预计：{{ case_.estimatedDays }}天</span>
              </div>
              <div class="timeline-item">
                <i class="fas fa-stethoscope"></i>
                <span>鉴定：{{ case_.appraisalDate || '未安排' }}</span>
              </div>
              <div class="timeline-item">
                <el-tag :type="getAppraisalStatusType(case_.appraisalStatus)" size="small">
                  {{ getAppraisalStatusText(case_.appraisalStatus) }}
                </el-tag>
              </div>
            </div>
            
            <div class="case-actions">
              <el-button size="small" type="primary" @click="startAppraisal(case_)">
                <i class="fas fa-play mr-1"></i>开始鉴定
              </el-button>
              <el-button size="small" type="info" @click="viewCaseDetail(case_)">
                <i class="fas fa-eye mr-1"></i>详情
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination-section">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCases"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 批量预约对话框 -->
    <el-dialog 
      v-model="batchAppointmentVisible" 
      title="批量预约鉴定" 
      width="600px"
      @close="closeBatchAppointmentDialog"
    >
      <div class="batch-appointment-dialog">
        <div class="selected-cases-summary">
          <h3 class="summary-title">已选择的案件</h3>
          <div class="cases-list">
            <div 
              v-for="case_ in selectedCases" 
              :key="case_.id"
              class="case-summary-item"
            >
              <div class="case-info">
                <span class="case-number">{{ case_.caseNumber }}</span>
                <span class="case-client">{{ case_.clientName }}</span>
                <el-tag :type="getProcessTypeColor(case_.processType)" size="small">
                  {{ getProcessTypeText(case_.processType) }}
                </el-tag>
              </div>
              <el-button size="mini" type="text" @click="removeCaseFromBatch(case_.id)">
                <i class="fas fa-times text-red-500"></i>
              </el-button>
            </div>
          </div>
        </div>

        <div class="appointment-form">
          <div class="form-section">
            <label class="form-label">预约日期</label>
            <el-date-picker
              v-model="batchAppointmentData.appointmentDate"
              type="date"
              placeholder="选择预约日期"
              :disabled-date="disabledDate"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </div>

          <div class="form-section">
            <label class="form-label">时间段安排</label>
            <el-radio-group v-model="batchAppointmentData.timeArrangement">
              <el-radio label="auto">自动安排时间</el-radio>
              <el-radio label="manual">手动指定时间</el-radio>
            </el-radio-group>
          </div>

          <div v-if="batchAppointmentData.timeArrangement === 'manual'" class="form-section">
            <label class="form-label">开始时间</label>
            <el-time-picker
              v-model="batchAppointmentData.startTime"
              placeholder="选择开始时间"
              format="HH:mm"
              value-format="HH:mm"
            />
          </div>

          <div class="form-section">
            <label class="form-label">分配鉴定师</label>
            <el-select v-model="batchAppointmentData.expertId" placeholder="选择鉴定师">
              <el-option 
                v-for="expert in availableExperts" 
                :key="expert.id"
                :label="expert.name"
                :value="expert.id"
              />
            </el-select>
          </div>

          <div class="form-section">
            <label class="form-label">备注说明</label>
            <el-input 
              v-model="batchAppointmentData.notes" 
              type="textarea" 
              :rows="3" 
              placeholder="输入批量预约的备注说明..."
            />
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-actions">
          <el-button @click="batchAppointmentVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmBatchAppointment">确认预约</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'

export default {
  name: 'PendingCases',
  setup() {
    const router = useRouter()
    const loading = ref(false)
    const searchQuery = ref('')
    const priorityFilter = ref('')
    const typeFilter = ref('')
    const appraisalDateRange = ref([])
    const statusFilter = ref('')
    const processTypeFilter = ref('')
    const viewMode = ref('table')
    const currentPage = ref(1)
    const pageSize = ref(20)
    const selectedCases = ref([])
    const batchAppointmentVisible = ref(false)
    
    const stats = reactive({
      urgentCases: 7,        // 紧急交通事故案件
      highPriorityCases: 15, // 高优先级交通事故案件
      normalCases: 32,       // 普通交通事故案件
      overdueCases: 4        // 逾期交通事故案件
    })
    
    // 批量预约数据
    const batchAppointmentData = reactive({
      appointmentDate: '',
      timeArrangement: 'auto',
      startTime: '',
      expertId: '',
      notes: ''
    })

    // 可用鉴定师列表
    const availableExperts = ref([
      { id: 1, name: '李法医', specialty: '人身损害' },
      { id: 2, name: '王专家', specialty: '车辆损失' },
      { id: 3, name: '赵专家', specialty: '因果关系' },
      { id: 4, name: '孙法医', specialty: '人身损害' }
    ])
    
    const cases = ref([
      {
        id: 1,
        caseNumber: 'TA2024015',
        clientName: '张某',
        caseType: '交通事故',
        processType: 'pre-litigation',
        priority: 'urgent',
        submittedDate: '2024-01-15',
        deadline: '2024-01-25',
        estimatedDays: 10,
        description: '高速公路多车连环相撞事故，需紧急鉴定多名伤者伤残等级',
        appraisalDate: '2024-01-22',
        appraisalStatus: 'scheduled'
      },
      {
        id: 2,
        caseNumber: 'TA2024016',
        clientName: '李某',
        caseType: '交通事故',
        processType: 'in-litigation',
        priority: 'high',
        submittedDate: '2024-01-18',
        deadline: '2024-02-05',
        estimatedDays: 15,
        description: '酒驾肇事案件，需鉴定被害人伤残等级及三期费用',
        appraisalDate: '2024-01-28',
        appraisalStatus: 'scheduled'
      },
      {
        id: 3,
        caseNumber: 'TA2024017',
        clientName: '王某',
        caseType: '交通事故',
        processType: 'settlement',
        priority: 'medium',
        submittedDate: '2024-01-20',
        deadline: '2024-02-10',
        estimatedDays: 12,
        description: '电动车与机动车碰撞，老人重伤需鉴定护理依赖程度',
        appraisalDate: '2024-02-01',
        appraisalStatus: 'pending-schedule'
      },
      {
        id: 4,
        caseNumber: 'TA2024018',
        clientName: '赵某',
        caseType: '交通事故',
        processType: 'pre-litigation',
        priority: 'urgent',
        submittedDate: '2024-01-10',
        deadline: '2024-01-20',
        estimatedDays: 8,
        description: '肇事逃逸案件，需紧急鉴定死亡原因及因果关系',
        appraisalDate: '2024-01-18',
        appraisalStatus: 'in-progress'
      },
      {
        id: 5,
        caseNumber: 'TA2024019',
        clientName: '陈某',
        caseType: '交通事故',
        processType: 'in-litigation',
        priority: 'high',
        submittedDate: '2024-01-22',
        deadline: '2024-02-08',
        estimatedDays: 14,
        description: '大货车侧翻压车事故，需鉴定车内人员伤亡情况',
        appraisalDate: '2024-02-05',
        appraisalStatus: 'pending-materials'
      },
      {
        id: 6,
        caseNumber: 'TA2024020',
        clientName: '孙某',
        caseType: '交通事故',
        processType: 'settlement',
        priority: 'medium',
        submittedDate: '2024-01-25',
        deadline: '2024-02-12',
        estimatedDays: 10,
        description: '停车场内车辆碰撞，需鉴定财产损失和轻微人身伤害',
        appraisalDate: null,
        appraisalStatus: 'pending-schedule'
      }
    ])
    
    const filteredCases = computed(() => {
      return cases.value.filter(case_ => {
        const matchesSearch = !searchQuery.value || 
          case_.caseNumber.includes(searchQuery.value) ||
          case_.clientName.includes(searchQuery.value) ||
          case_.caseType.includes(searchQuery.value) ||
          case_.description.includes(searchQuery.value)
        
        const matchesPriority = !priorityFilter.value || case_.priority === priorityFilter.value
        const matchesType = !typeFilter.value || case_.caseType.includes(typeFilter.value)
        const matchesStatus = !statusFilter.value || case_.appraisalStatus === statusFilter.value
        const matchesProcessType = !processTypeFilter.value || case_.processType === processTypeFilter.value
        
        // 鉴定时间范围过滤
        let matchesDate = true
        if (appraisalDateRange.value && appraisalDateRange.value.length === 2) {
          const [startDate, endDate] = appraisalDateRange.value
          if (case_.appraisalDate) {
            const appraisalDate = new Date(case_.appraisalDate)
            const start = new Date(startDate)
            const end = new Date(endDate)
            matchesDate = appraisalDate >= start && appraisalDate <= end
          } else {
            // 如果没有鉴定日期，不匹配日期范围筛选
            matchesDate = false
          }
        }
        
        return matchesSearch && matchesPriority && matchesType && matchesStatus && matchesProcessType && matchesDate
      })
    })
    
    const totalCases = computed(() => filteredCases.value.length)
    
    // 选中案件的ID列表
    const selectedCaseIds = computed(() => selectedCases.value.map(case_ => case_.id))
    
    const getPriorityType = (priority) => {
      const types = {
        'urgent': 'danger',
        'high': 'warning',
        'medium': 'primary',
        'low': 'info'
      }
      return types[priority] || 'info'
    }
    
    const getPriorityText = (priority) => {
      const texts = {
        'urgent': '紧急',
        'high': '高',
        'medium': '中',
        'low': '低'
      }
      return texts[priority] || '未知'
    }
    
    const isOverdue = (deadline) => {
      const today = new Date()
      const deadlineDate = new Date(deadline)
      return deadlineDate < today
    }
    
    const getAppraisalStatusType = (status) => {
      const types = {
        'pending-schedule': 'warning',
        'scheduled': 'primary',
        'in-progress': 'success',
        'pending-materials': 'danger'
      }
      return types[status] || 'info'
    }
    
    const getAppraisalStatusText = (status) => {
      const texts = {
        'pending-schedule': '待安排',
        'scheduled': '已安排',
        'in-progress': '进行中',
        'pending-materials': '待补材料'
      }
      return texts[status] || '未知状态'
    }
    
    // 流程类型相关方法
    const getProcessTypeColor = (processType) => {
      const colors = {
        'pre-litigation': 'primary',
        'in-litigation': 'warning', 
        'settlement': 'success'
      }
      return colors[processType] || 'info'
    }
    
    const getProcessTypeText = (processType) => {
      const texts = {
        'pre-litigation': '诉前',
        'in-litigation': '诉中',
        'settlement': '和谈'
      }
      return texts[processType] || '未知'
    }
    
    const handleSearch = () => {
      currentPage.value = 1
    }
    
    const handleSizeChange = (size) => {
      pageSize.value = size
      currentPage.value = 1
    }
    
    const handleCurrentChange = (page) => {
      currentPage.value = page
    }
    
    const refreshData = () => {
      loading.value = true
      setTimeout(() => {
        loading.value = false
        alert('数据已刷新')
      }, 1000)
    }
    
    const startAppraisal = (case_) => {
      router.push(`/appraisal/identification/${case_.id}`)
    }
    
    const viewCaseDetail = (case_) => {
      alert(`查看案件详情: ${case_.caseNumber}`)
    }
    

    
    // 选择相关方法
    const handleSelectionChange = (selection) => {
      selectedCases.value = selection
    }
    
    const handleCardSelection = (case_) => {
      const index = selectedCases.value.findIndex(c => c.id === case_.id)
      if (index > -1) {
        selectedCases.value.splice(index, 1)
      } else {
        selectedCases.value.push(case_)
      }
    }
    
    const clearSelection = () => {
      selectedCases.value = []
    }
    
    // 批量预约相关方法
    const showBatchAppointmentDialog = () => {
      if (selectedCases.value.length === 0) {
        alert('请先选择要预约的案件')
        return
      }
      batchAppointmentVisible.value = true
    }
    
    const closeBatchAppointmentDialog = () => {
      batchAppointmentVisible.value = false
      Object.assign(batchAppointmentData, {
        appointmentDate: '',
        timeArrangement: 'auto',
        startTime: '',
        expertId: '',
        notes: ''
      })
    }
    
    const removeCaseFromBatch = (caseId) => {
      const index = selectedCases.value.findIndex(c => c.id === caseId)
      if (index > -1) {
        selectedCases.value.splice(index, 1)
      }
      if (selectedCases.value.length === 0) {
        batchAppointmentVisible.value = false
      }
    }
    
    const disabledDate = (time) => {
      // 禁用过去的日期
      return time.getTime() < Date.now() - 8.64e7
    }
    
    const confirmBatchAppointment = () => {
      if (!batchAppointmentData.appointmentDate || !batchAppointmentData.expertId) {
        alert('请填写完整的预约信息')
        return
      }
      
      const expert = availableExperts.value.find(e => e.id === batchAppointmentData.expertId)
      
      // 更新选中案件的预约信息
      selectedCases.value.forEach(case_ => {
        case_.appraisalDate = batchAppointmentData.appointmentDate
        case_.appraisalStatus = 'scheduled'
        case_.assignedExpert = expert.name
      })
      
      alert(`成功为 ${selectedCases.value.length} 个案件安排了预约`)
      
      // 清空选择并关闭对话框
      selectedCases.value = []
      batchAppointmentVisible.value = false
    }
    
    return {
      loading,
      searchQuery,
      priorityFilter,
      typeFilter,
      appraisalDateRange,
      statusFilter,
      processTypeFilter,
      viewMode,
      currentPage,
      pageSize,
      selectedCases,
      selectedCaseIds,
      batchAppointmentVisible,
      batchAppointmentData,
      availableExperts,
      stats,
      cases,
      filteredCases,
      totalCases,
      getPriorityType,
      getPriorityText,
      getProcessTypeColor,
      getProcessTypeText,
      isOverdue,
      getAppraisalStatusType,
      getAppraisalStatusText,
      handleSearch,
      handleSizeChange,
      handleCurrentChange,
      handleSelectionChange,
      handleCardSelection,
      clearSelection,
      showBatchAppointmentDialog,
      closeBatchAppointmentDialog,
      removeCaseFromBatch,
      disabledDate,
      confirmBatchAppointment,
      refreshData,
      startAppraisal,
      viewCaseDetail
    }
  }
}
</script>

<style scoped>
.pending-cases {
  padding: 24px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: bold;
  color: #1f2937;
  margin: 0;
}

.search-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-row {
  display: flex;
  gap: 16px;
  align-items: center;
}

.search-input {
  flex: 1;
  max-width: 400px;
}

.priority-filter,
.type-filter,
.status-filter,
.process-filter {
  width: 120px;
}

.date-range-filter {
  width: 240px;
}

.stats-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
  border-left: 4px solid #e5e7eb;
}

.stat-card.urgent {
  border-left-color: #dc2626;
}

.stat-card.high {
  border-left-color: #f59e0b;
}

.stat-card.normal {
  border-left-color: #3b82f6;
}

.stat-card.overdue {
  border-left-color: #8b5cf6;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #6b7280;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #1f2937;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #6b7280;
  margin-top: 4px;
}

.cases-section {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  color: #1f2937;
  margin: 0;
}

.table-view {
  margin-bottom: 20px;
}

.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.case-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  background: #fafafa;
  transition: all 0.3s ease;
}

.case-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.case-card.urgent {
  border-left: 4px solid #dc2626;
}

.case-card.overdue {
  border-left: 4px solid #8b5cf6;
}

.case-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.case-number {
  font-size: 18px;
  font-weight: bold;
  color: #1f2937;
}

.case-info {
  margin-bottom: 16px;
}

.client-name {
  font-size: 16px;
  font-weight: bold;
  color: #1f2937;
  margin: 0 0 4px 0;
}

.case-type {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 8px 0;
}

.case-description {
  font-size: 14px;
  color: #4b5563;
  margin: 0;
  line-height: 1.5;
}

.case-timeline {
  margin-bottom: 16px;
}

.timeline-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 12px;
  color: #6b7280;
}

.timeline-item.overdue {
  color: #dc2626;
}

.timeline-item i {
  width: 14px;
}

.case-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.pagination-section {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 选择相关样式 */
.selected-card {
  border: 2px solid #409EFF !important;
  box-shadow: 0 0 10px rgba(64, 158, 255, 0.3);
}

.batch-appointment-dialog .el-dialog {
  max-width: 600px;
}

.selected-cases-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  padding: 8px;
}

.selected-case-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid #F5F7FA;
}

.selected-case-item:last-child {
  border-bottom: none;
}

.case-number {
  font-weight: 500;
  color: #303133;
}

.case-type {
  font-size: 12px;
  color: #909399;
}

.batch-summary {
  background: #F0F9FF;
  border: 1px solid #BFDBFE;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 16px;
}

.summary-text {
  color: #1E40AF;
  font-size: 14px;
  margin: 0;
}
</style> 